<template>
	<div class="indexBox">
		<div class="indexBox_top">
			<el-card class="box-card">
				<el-form :inline="true" :model="formInline" class="demo-form-inline">
					<el-form-item label="生坯编号">
						<el-input v-model="formInline.serialNumber" placeholder="请输入生坯编号查询" />
					</el-form-item>
					<el-form-item label="开始日期">
						<el-date-picker v-model="formInline.startDateTime" type="date" format="YYYY-MM-DD"
							value-format="YYYY-MM-DD" placeholder="请选择开始日期查询" size="large" />
					</el-form-item>
					<el-form-item label="结束日期">
						<el-date-picker v-model="formInline.endDateTime" type="date" format="YYYY-MM-DD"
							value-format="YYYY-MM-DD" placeholder="请选择结束日期查询" size="large" />
					</el-form-item>
					<el-form-item label="东西线">
						<el-select v-model="formInline.batchingType" clearable placeholder="请选择生产线" style="width: 240px">
							<el-option v-for="item in isWEoptions" :key="item.value" :label="item.label"
								:value="item.value" />
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSubmit">查 询</el-button>
					</el-form-item>
				</el-form>
			</el-card>
		</div>
		<div class="indexBox_bottom">
			<el-card class="box-card">
				<el-table :data="tableData" border style="width: 100%"  @selection-change="handleSelectionChange">
					<el-table-column align="center" type="selection" width="60" :selectable="selectable" />
					<el-table-column v-for="(item, index) in table" :key="item.prop" :prop="item.prop"
						:label="item.label" :width="item.width">
						<template #default="scope">
							<div class="num" v-if="item.prop === 'serialNumber'" @click="goDetails(scope.row['serialNumber'])">
								{{ scope.row['serialNumber'] }}
							</div>
							<div v-else-if="item.prop === 'batchingType'">
								{{ getdx(scope.row['batchingType']) }}
							</div>
							<div v-else>
								{{ scope.row[item.prop] }}
							</div>
						</template>
					</el-table-column>

				</el-table>
				<div style="margin-top: 12px; display: flex; flex-direction: row-reverse">
					<el-pagination v-show="total>0" v-model:current-page="listQuery.current"
						v-model:page-size="listQuery.size" :page-sizes="[10, 20, 30 ]" :size="size"
						:background="background" layout="total, sizes, prev, pager, next, jumper" :total="total"
						@size-change="handleSizeChange" @current-change="handleCurrentChange" />
				</div>
			</el-card>
		</div>


	</div>
</template>

<script lang="ts" setup>
	import { reactive, ref, onMounted } from 'vue'
	import router from '@/router/index.js'
	import type { ComponentSize } from 'element-plus'
	import { ElMessage } from 'element-plus'
	import { getList } from '@/request/index'

	const formInline = reactive({
		serialNumber: '',
		startDateTime: '',
		batchingType: null,
		endDateTime: '',
	})
	const listQuery = reactive({
		current: 1,
		size: 20,

	})
	const isWEoptions = reactive([

		{
			value: 1,
			label: '东线',
		},
		{
			value: 2,
			label: '西线',
		}


	])

	const tableData = ref([])
	const total = ref(0)
	const background = reactive('#409EFF')
	const size = ref<ComponentSize>('default')
	const table = reactive([
		{
			prop: 'endTime',
			label: '日期',
			width: 180
		},
		{
			prop: 'serialNumber',
			label: '生坯编号',
			width: 250
		},
		{
			prop: 'batchingType',
			label: '生产线',
			width: null
		},
		{
			prop: 'groups',
			label: '班组',
			width: null
		},
		{
			prop: 'carbonBlockModel',
			label: '品种',
			width: null
		}
	])

	// 已选择的数据行
	const multipleSelection = ref([]);
	const handleSelectionChange = (selection: AppointmentCommissionVo[]) => {
		
	    multipleSelection.value = selection.map(item=>item.serialNumber);
	  };

	/** 控制表格只能选择5条数据 */
	const selectable = (row) => {
		
		if (multipleSelection.value.includes(row.serialNumber)) {
			// 已选择的行，可取消选择
			return true;
		} else if (multipleSelection.value.length >= 5 && !row.selected) {
			// 超过最大选择条数，且当前行未被选中时，禁用
			return false;
		} else {
			// 其他情况下可选
			return true;
		}
	};

	const getParams = () => {
		let params = {}
		params = Object.assign({}, formInline, listQuery);
		return params
	}
	const getdx = (prop) => {
		if (prop === 1) {
			return '东线'
		} else if (prop === 2) {
			return '西线'
		}
	}
	const getLists = (params) => {
		getList(params).then(res => {
			if (res.data.code === 200) {
				tableData.value = []
				tableData.value = res.data.result.records
				total.value = res.data.result.total
			} else {
				ElMessage({
					message: res.data.message,
					type: 'error',
				})
			}




		}).catch(err => {
			ElMessage({
				message: err,
				type: 'error',
			})
		})
	}
	const handleSizeChange = (val : number) => {

		listQuery.size = val
		const params = getParams()
		getLists(params)
	}
	const handleCurrentChange = (val : number) => {

		listQuery.current = val
		const params = getParams()
		getLists(params)
	}

	const onSubmit = () => {
		const params = getParams()
		getLists(params)
	}
	//去详情
	const goDetails = (num)=>{
		
		 router.push({
		    path: '/details',
		    query: {
		      serialNumber: num,
		    }
		  })
	}
	onMounted(() => {
		onSubmit()
	})
</script>
<style lang="scss" scoped>
  
  ::v-deep .el-table__header-wrapper .el-checkbox {
    display: none;
  }
</style>
<style lang="scss" scoped>
	.indexBox {
		padding: 20px;
		box-sizing: border-box;

		&_top {}

		&_bottom {
			margin-top: 18px;

			.num {
				cursor: pointer;
				color: #409EFF;
			}
		}
	}
</style>